<template>
  <div id="sche" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="/sche/Sche">排班查看</BreadcrumbItem>
			</Breadcrumb>
			<div class="btns">
				<ButtonGroup>
	        <Button type="text" @click="openNew"><i class="fa fa-plus"></i><span>添加</span></Button>
	        <Button type="text" @click="exportData"><i class="fa fa-download"></i><span>导出数据</span></Button>
	    	</ButtonGroup>
			</div>
		</div>
    <TableSearch>
      <Form :label-width="80">
        <Row :gutter="16">
          <Col :md="8">
            <FormItem label="司机">
              <DriverComplete v-model="driverIds" :multiple="true"></DriverComplete>
		        </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="车牌号">
              <VehicleComplete v-model="vehicleIds"></VehicleComplete>
            </FormItem>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="table-content">
			<div class="table">
				<table>
					<thead>
						<th>开始时间</th>
						<th>结束时间</th>
						<th>任务名称</th>
						<th>司机</th>
						<th>车辆</th>
						<!-- <th>所属机构</th> -->
						<th>操作</th>
					</thead>
					<tbody>
            <tr v-for="(v,i) in pageData.thisPageElements" :key="`Sche-list-key-${v.id}`">
							<td>{{moment(v.startTime).format('YYYY-MM-DD HH:mm')}}</td>
							<td>{{moment(v.endTime).format('YYYY-MM-DD HH:mm')}}</td>
							<td>{{v.taskName}}</td>
							<td>{{v.receiveUniqueName}}</td>
							<td>{{v.plateNumber}}</td>
							<!-- <td>顺丰/重庆分公司/A区/A车队</td> -->
							<td class="operate">
								<a @click="openView(v.id)">查看</a>
								<a @click="openEdit(v.id)">编辑</a>
								<a @click="doDelete(v)">删除</a>
							</td>
						</tr>
            <tr v-if="!isLoading && pageData.totalNumberOfElements <= 0">
              <td colspan="6">暂无数据</td>
            </tr>
					</tbody>
				</table>
			</div>

			<Page :total="pageData.totalNumberOfElements" :page-size="pageData.pageSize" :current="current" @on-change="loadPage" show-total></Page>
			<Spin size="large" fix v-if="isLoading"></Spin>
		</div>

    <ScheModal :modal="modal" :modalTitle="modalTitle" :modalType="modalType" :closeModal="closeModal" @edit="onEdit" @add="onAdd"></ScheModal>
  </div>
</template>

<script>
  import {mapState,mapActions} from 'vuex'
  import moment                from 'moment'
  import ScheModal             from './ScheModal'
  import {download}  					 from '@/util/request'

  export default {
    components:{
      ScheModal
    },
    data(){
      return {
        current:1,

        modal:false,
				modalTitle:'',
				modalType:false,// 1：新增，0：查看，2：编辑

        driverIds:[],
        vehicleIds:[],
        searchForm:{}
      };
    },
    computed:{
      ...mapState('sche/scheList',['isLoading','pageData','isModalLoading']),
    },
    methods:{
      moment,
      ...mapActions('sche/scheList',['reload','deleteSche','loadView']),
      openNew(){
				this.modalTitle = '添加排班';
				this.modalType = 1;
				this.modal = true;
			},
			openView(id){
				this.modalTitle = '查看排班';
				this.modalType = 0;
				this.modal = true;
				this.loadView(id);
			},
			openEdit(id){
				this.modalTitle = '编辑排班';
				this.modalType = 2;
				this.modal = true;
				this.loadView(id);
			},
      closeModal(){
				this.modal = false;
			},
      onEdit(){
				this.loadPage(this.current);
			},
			onAdd(){
				this.loadPage(1);
			},
      deleteLoadPage(){
				let total = this.pageData.totalNumberOfElements - 1;
				let pageSize = parseInt(total / this.pageData.pageSize) + (total % this.pageData.pageSize > 0 ? 1 : 0);
				if (this.current > 1 && this.current > pageSize) {
					this.current--;
				}
				this.loadPage(this.current);
			},
      doDelete(v){
        this.$Modal.confirm({
          title: '删除排班',
          content: `是否删除该排班？`,
          loading: true,
          onOk:async ()=>{
            let res = await this.deleteSche({id:v.id});
            if(res.data.success){
              this.$Modal.remove();
              this.deleteLoadPage();
              this.$Message.success('删除成功');
            }else{
              this.$Modal.remove();
              this.$Message.error(res.data.msg);
            }
          }
        });
      },
      search(){
				this.searchForm = {
					vehicleIds:this.vehicleIds.join(','),
					driverIds:this.driverIds.join(',')
				}
				this.loadPage(1);
			},
      loadPage(n){
				this.current = n;
				this.reload({
					pageNum:this.current,
					...this.searchForm
				});
			},
      exportData(){
        download('/atten/scheduling/export',this.searchForm);
      }
    },
    mounted(){
      this.reload();
    }
  }
</script>
